<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webapp2</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        
    </style>
</head>

<body>
    <!-- header start -->
    <header class="header">
        <div class="logo-wrap">
            <a href="#">
                <img src="./images/logo-@2x.png" alt="" class="logo">
            </a>
        </div>
        <div class="search">
            <a href="#">
                <img src="./images/search-@2x.png" alt="" class="search-img">
            </a>
        </div>
        <div class="login">
            <a href="#">登录</a>
        </div>
        <a class="download" href="#">下载APP</a>
    </header>
    <!-- end header -->

    <!-- nav start -->
    <nav class="nav">
        <div class="swiper" id="nav">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="#" class="active">首页</a></div>
                <div class="swiper-slide"><a href="#">课程</a></div>
                <div class="swiper-slide"><a href="#">动画</a></div>
                <div class="swiper-slide"><a href="#">番剧</a></div>
                <div class="swiper-slide"><a href="#">音乐</a></div>
                <div class="swiper-slide"><a href="#">游戏</a></div>
                <div class="swiper-slide"><a href="#">直播</a></div>
                <div class="swiper-slide"><a href="#">舞蹈</a></div>
                <div class="swiper-slide"><a href="#">电视</a></div>
                <div class="swiper-slide"><a href="#">电影</a></div>
                <div class="swiper-slide"><a href="#">动画</a></div>
                <div class="swiper-slide"><a href="#">原创</a></div>
                <div class="swiper-slide"><a href="#">科技</a></div>
                <div class="swiper-slide"><a href="#">社会</a></div>
                <div class="swiper-slide"><a href="#">法律</a></div>
                <div class="swiper-slide"><a href="#">历史</a></div>
                <div class="swiper-slide"><a href="#">地理</a></div>
                <div class="swiper-slide"><a href="#">政治</a></div>
            </div>
        </div>
    </nav>
    <!-- end nav -->

    <!-- banner start -->
    <section class="banner">
        <div class="swiper" id="banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#"><img src="./images/banner-1.png" alt="" class="img-cover"></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="./images/banner-2.png" alt="" class="img-cover"></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="./images/banner-3.png" alt="" class="img-cover"></a>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </section>
    <!-- end banner -->

    <!-- menu start -->
    <nav class="menu">
        <ul>
            <li>
                <a href="#">
                    <img src="./images/icon1.png" alt="">
                    <p>番 剧</p>

                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon2.png" alt="">
                    <p>直 播</p>

                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon3.png" alt="">
                    <p>电视剧</p>

                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon4.png" alt="">
                    <p>生 活</p>

                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon5.png" alt="">
                    <p>电 影</p>

                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon6.png" alt="">
                    <p>游 戏</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon7.png" alt="">
                    <p>鬼 畜</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon8.png" alt="">
                    <p>科 技</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon9.png" alt="">
                    <p>冷知识</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon10.png" alt="">
                    <p>新片预告</p>
                </a>
            </li>
        </ul>
    </nav>
    <!-- end menu -->

    <!-- main start -->
    <main class="main container">
        <!-- tabs start -->
        <section class="tabs">
            <div class="tabs-header">
                <div class="tabs-header-item active">热门排行</div>
                <div class="tabs-header-item">最新更新</div>
                <div class="tabs-header-item">完结动画</div>
            </div>
            <div class="tabs-content">
                <div class="tabs-content-item" style="display: block;">
                    <div class="swiper hot-rank" id="hot-rank">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title multi-text-ellipsis">CSS 发展史与 CSS 模块划分：HTML 的诞生，CSS
                                            的诞生和发展啦啦啦啦</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic2.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic3.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic4.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic5.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic6.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tabs-content-item">
                    <div class="swiper new-update" id="new-update">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic3.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">CSS 发展史与 CSS 模块划分：HTML 的诞生，CSS
                                            的诞生和发展啦啦啦啦</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic4.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic2.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic5.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic6.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tabs-content-item">
                    <div class="swiper end-ani" id="end-ani">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic5.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">CSS 发展史与 CSS 模块划分：HTML 的诞生，CSS
                                            的诞生和发展啦啦啦啦</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic6.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic3.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic4.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic5.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic6.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end tabs -->

        <!-- recommend-list start -->
        <section class="recommend-list">
            <ul>
                <li>
                    <a href="#">
                        <div class="img">
                            <img src="./images/list1.png" alt="" class="img-cover">
                        </div>
                        <div class="info">
                            <p class="title single-text-ellipsis">自制战斗机式的打水仗摩托车</p>
                            <p class="desc single-text-ellipsis">
                                这是一个自制的战斗机式的打水仗摩托车，它的设计灵感来自于经典的战斗机，但是它的重量只有100kg，所以它的重量轻，但是它的性能却非常强大，它的速度可以达到100km/h，它的射程可以达到1000m，它的伤害可以达到10000点，它的伤害可以达到10000点
                            </p>
                        </div>
                        <div class="play-button"></div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="img">
                            <img src="./images/list2.png" alt="" class="img-cover">
                        </div>
                        <div class="info">
                            <p class="title single-text-ellipsis">原 神 之 友 （第九期）</p>
                            <p class="desc single-text-ellipsis">
                                所有原神玩家都可以参加！本期还会额外有一个满100人直播，直播时间为10月10日19:00-21:00，
                            </p>
                        </div>
                        <div class="play-button"></div>
                    </a>
                </li>
            </ul>
        </section>
        <!-- end recommend-list -->

        <!-- history start -->
        <section class="history">
            <div class="history-header">
                <p class="title">最近在看</p>
                <a href="#">查看全部</a>
            </div>
            <div class="history-list">
                <div class="swiper swiper-history" id="history">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-warp">
                                    <img src="./images/history1.png" alt="">
                                </div>
                                <p class="title multi-text-ellipsis">再飞行，带着 梦想再次的飞起</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-warp">
                                    <img src="./images/history2.png" alt="">
                                </div>
                                <p class="title multi-text-ellipsis">这才是顶级的 气场</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-warp">
                                    <img src="./images/history3.png" alt="">
                                </div>
                                <p class="title multi-text-ellipsis">番外 动态漫</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-warp">
                                    <img src="./images/history1.png" alt="">
                                </div>
                                <p class="title multi-text-ellipsis">再飞行，带着 梦想再次的飞起</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-warp">
                                    <img src="./images/history3.png" alt="">
                                </div>
                                <p class="title multi-text-ellipsis">这才是顶级的 气场</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-warp">
                                    <img src="./images/history2.png" alt="">
                                </div>
                                <p class="title multi-text-ellipsis">番外 动态漫</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-warp">
                                    <img src="./images/history1.png" alt="">
                                </div>
                                <p class="title multi-text-ellipsis">再飞行，带着 梦想再次的飞起</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-warp">
                                    <img src="./images/history2.png" alt="">
                                </div>
                                <p class="title multi-text-ellipsis">番外 动态漫</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-warp">
                                    <img src="./images/history3.png" alt="">
                                </div>
                                <p class="title multi-text-ellipsis">再飞行，带着 梦想再次的飞起</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </section>
        <!-- end history -->

        <!-- information list start -->
        <section class="information-list">
            <ul>
                <li>
                    <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                </li>
                <li>
                    <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic2.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                </li>
                <li>
                    <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic3.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                </li>
                <li>
                    <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic4.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                </li>
                <li>
                    <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic5.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                </li>
                <li>
                    <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic6.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>

                                        </div>
                                        <p class="title multi-text-ellipsis">宣威火腿月饼能让人记挂多年，靠的从不是花哨噱头，而是看得见、摸得着的真实美味
                                        </p>
                                    </a>
                                </div>
                </li>
            </ul>
        </section>
        <!-- end information list -->

    </main>
    <!-- end main -->
    <!-- tabber start -->
    <section class="tabber">
        <ul>
            <li class="active">
                <a href="#">
                    <span class="icon icon1"></span>
                    <span class="txt">首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon icon2"></span>
                    <span class="txt">动态</span>
                </a>
            </li>
            <li class="add">
                <a href="#"></a>
            </li>
            <li>
                <a href="#">
                    <span class="icon icon3"></span>
                    <span class="txt">会员购</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon icon4"></span>
                <span class="txt">我的</span>
                </a>
            </li>
        </ul>
    </section>
    <!-- end tabber -->
    <script src="./js/index.js"></script>
    <script src="./js/rem.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script>
        var mySwiper1 = new Swiper('#nav', {
            slidesPerView: 6.5,
        });
        var mySwiper2 = new Swiper('#banner', {
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        })
        var mySwiper3 = new Swiper('.tabs-content-item .swiper', {
            slidesPerView: 2,
            spaceBetween: 19,
        })
        var mySwiper4 = new Swiper('#history', {
            slidesPerView: 'auto',
            spaceBetween: 11,
        }) 
    </script>
</body>

</html>